<!-- 项目佣金激励报表-->
<template>
  <div class="staffCommissionView">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="报表名称：">
        <el-input placeholder="请输入报表名称" v-model.trim="form.reportName" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="日期：">
        <el-date-picker
          v-model="time"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSearch" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="报表名称" prop="reportName" align="center"></el-table-column>
      <el-table-column label="月份" prop="month" align="center"></el-table-column>
      <el-table-column label="调整前" :formatter="adjustBefore" align="center"></el-table-column>
      <el-table-column label="调整后" :formatter="adjustAfter" align="center"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="goDetail(scope.row.month)" type="text">查看</el-button>
          <el-button :disabled="scope.row.clearingFlag === 1" @click="settlement(scope.row.id)" type="text">结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import utils from "@/common/utils";
export default {
  name: "projectCommissionIncentiveStatement",
  title: '项目佣金激励报表',
  data() {
    return {
      form: {
        pageSize: 10,
        pageNum: 1,
        reportName: "",
        beginTime: "",
        endTime: ""
      },
      time: [],
      total: 0,
      tableData: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$axios
        .post("/commallocation/orderDrawInfo/monthPageList", this.form)
        .then(res => {
          this.tableData = res.list;
          this.total = res.total;
        });
    },
    adjustBefore(row) {
      return utils.formatMoney(row.adjustBefore);
    },
    adjustAfter(row) {
      return utils.formatMoney(row.adjustAfter);
    },
    getSearch() {
      this.form.pageNum = 1;
      let [beginTime, endTime] = this.time || [];
      this.form.beginTime = beginTime;
      this.form.endTime = endTime;
      this.getList();
    },
    goDetail(month) {
      this.$router.push({
        name: "projectCommissionIncentiveView",
        query: {
          month: month
        }
      });
    },
    settlement(id) {
      this.$confirm("是否结算，结算后不可更改报表，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.post("/commallocation/orderDrawInfo/monthSettleAccounts",{id}).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList();
    }
  }
};
</script>

<style lang="stylus"></style>
